<template>
    <div>
        <el-dialog v-model="props.visible" title="设备/机台列表" width="70%" @close="handleCancel">
            <el-form :model="queryParams" ref="queryRef" :inline="true">
                <el-row>
                    <el-form-item label="设备编码" prop="machineNo">
                        <el-input
                            v-model.trim="queryParams.machineNo"
                            style="width: 200px"
                            placeholder="请输入设备编码"
                            clearable
                            @keyup.enter="handleQuery"
                        />
                    </el-form-item>
                    <el-form-item label="设备名称" prop="machineName">
                        <el-input
                            v-model.trim="queryParams.machineName"
                            style="width: 200px"
                            placeholder="请输入设备名称"
                            clearable
                            @keyup.enter="handleQuery"
                        />
                    </el-form-item>
            <el-form-item label="车间名称" prop="workshopId">
                <el-select
                    v-model="queryParams.workshopId"
                    style="width: 200px"
                    placeholder="请选择车间名称"
                >
                    <el-option
                        v-for="item in workShopList"
                        :key="item.id"
                        :value="item.id"
                        :label="item.name"
                    ></el-option>
                </el-select>
            </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="handleQuery"
                            >搜索</el-button
                        >
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-row>
            </el-form>
            <el-table
                v-loading="loading"
                :data="userList"
                stripe
                border
                style="cursor: pointer"
                @cell-click="handleCellClick"
            >
                <el-table-column label="序号" width="80" type="index" align="center" />
                <el-table-column
                    label="设备编码"
                    align="center"
                    prop="machineNo"
                    min-width="150"
                >
                </el-table-column>
                <el-table-column
                    label="设备名称"
                    align="center"
                    prop="machineName"
                    min-width="120"
                />
                <el-table-column
                    label="车间编码"
                    align="center"
                    prop="workshopNo"
                    min-width="150"
                />
                <el-table-column
                    label="车间名称"
                    align="center"
                    prop="workshopName"
                    min-width="120"
                />
                <el-table-column
                    label="版材尺寸"
                    align="center"
                    prop="size"
                    min-width="100"
                >
                    <template v-slot="{ row }">
                        <dict-tag :options="ems_machine_info_size" :value="row.size" />
                    </template>
                </el-table-column>
                <el-table-column
                    label="损耗比例(%)"
                    align="center"
                    prop="wasteRate"
                    width="100"
                >
                    <template v-slot="{ row }">
                        <dict-tag :options="ems_machine_info_waste_rate" :value="row.wasteRate" />
                    </template>
                </el-table-column>
                <el-table-column
                    label="机型"
                    align="center"
                    prop="model"
                    width="100"
                >
                    <template v-slot="{ row }">
                        <dict-tag :options="ems_machine_info_model" :value="row.model" />
                    </template>
                </el-table-column>
                <el-table-column
                    label="产能(令/时、吨/时)"
                    align="center"
                    min-width="100"
                    prop="capacity"
                />
                <el-table-column
                    label="类型"
                    align="center"
                    prop="type"
                    width="100"
                >
                    <template v-slot="{ row }">
                        <dict-tag :options="ems_machine_info_type" :value="row.type" />
                    </template>
                </el-table-column>
                <el-table-column
                    label="负责人"
                    align="center"
                    prop="headUserName"
                    min-width="100"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    label="负责人电话"
                    align="center"
                    prop="headUserPhone"
                    min-width="120"
                    :show-overflow-tooltip="true"
                />
            </el-table>
            <div class="footer">
                <pagination
                    v-show="total > 0"
                    :total="total"
                    v-model:page="queryParams.pageNum"
                    v-model:limit="queryParams.pageSize"
                    @pagination="getList"
                />
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
const emit = defineEmits(['changeUpdate'])
// import { getList as getDataList } from '@/api/basicInfo/workbench'
import { getMachineType as getDataList } from '@/api/production/machineRelevance'
import { getMesWorkShop } from '@/api/basicInfo/workshop'
const { proxy } = getCurrentInstance()
const {
    ems_machine_info_size,
    ems_machine_info_waste_rate,
    ems_machine_info_model,
    ems_machine_info_type,
} = proxy.useDict(
    'ems_machine_info_size',
    'ems_machine_info_waste_rate',
    'ems_machine_info_model',
    'ems_machine_info_type'
)

const workShopList = ref([])
const getWorkShop = () => {
    getMesWorkShop({}).then(res => {
        workShopList.value = res.rows
    })
}
getWorkShop()
const props = defineProps({
    visible: {
        type: Boolean,
        default: false,
    },
    type: {
        type: String,
        default: '2',
    },
})
watch(
    () => props.visible,
    (val) => {
        if (val) {
            handleQuery()
        }
    }
)
const userList = ref([])
const loading = ref(false)
const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
    status: 2,
    machineName: undefined,
    machineNo: undefined,
})
const total = ref(0)

// 选中当前行
const handleCellClick = (row) => {
    proxy.$modal
        .confirm('是否确认选择「' + row.machineName + '」')
        .then(function () {
            emit('changeUpdate', row)
        })
        .catch(() => {})
}

const handleCancel = () => {
    proxy.resetForm('queryRef')
    emit('cancel')
}
const getList = async () => {
    loading.value = true
    if (props.type) {
        queryParams.value.type = props.type
    }
    const res = await getDataList(queryParams.value)
    loading.value = false
    userList.value = res.rows
    total.value = res.total
}
// 搜索
const handleQuery = () => {
    queryParams.value.pageNum = 1
    getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
    proxy.resetForm('queryRef')
    handleQuery()
}
// getList()
</script>

<style lang="scss" scoped></style>
